
import { Brain, Target, TrendingUp, Clock, CheckCircle, AlertCircle, Info } from 'lucide-react';

interface DataRequirementsProps {
  currentDataStatus?: {
    totalTasks: number;
    completedTasks: number;
    tasksLast30Days: number;
    tasksLast60Days: number;
    categoriesWithData: number;
    prioritiesWithData: number;
  };
}

export default function DataRequirements({ currentDataStatus }: DataRequirementsProps) {
  const requirements = [
    {
      feature: '工作模式分析',
      icon: <Brain className="w-5 h-5" />,
      minRequirement: '最近30天内至少5个已完成任务',
      optimalRequirement: '最近30天内至少15个任务，分布在不同时间段',
      description: '分析您的24小时工作模式、高效时段和工作日vs周末效率',
      dataPoints: [
        '需要任务的创建时间和完成时间',
        '建议有不同优先级和分类的任务',
        '时间跨度越长，分析越准确'
      ]
    },
    {
      feature: '拖延行为分析', 
      icon: <Clock className="w-5 h-5" />,
      minRequirement: '每个分类至少3个已完成任务（最近60天）',
      optimalRequirement: '每个分类至少10个任务，包含截止日期信息',
      description: '识别拖延模式，分析不同类别任务的延迟情况',
      dataPoints: [
        '需要设置任务截止日期',
        '至少2-3个不同的任务分类',
        '完成任务时需要更新状态'
      ]
    },
    {
      feature: '生产力建议',
      icon: <Target className="w-5 h-5" />,
      minRequirement: '最近30天内至少10个任务',
      optimalRequirement: '最近30天内至少20个任务，包含多种分类',
      description: '基于您的任务管理习惯提供个性化改进建议',
      dataPoints: [
        '需要多样化的任务类型',
        '建议使用优先级标记',
        '保持任务状态的及时更新'
      ]
    },
    {
      feature: '任务预测分析',
      icon: <TrendingUp className="w-5 h-5" />,
      minRequirement: '每个优先级+分类组合至少3个历史任务',
      optimalRequirement: '每个组合至少10个历史任务（最近90天）',
      description: '预测新任务的完成时间，识别可能延期的任务',
      dataPoints: [
        '需要丰富的历史完成数据',
        '建议使用一致的分类体系',
        '预测准确性随数据增长而提升'
      ]
    }
  ];

  const getStatusColor = (current: number, min: number, optimal: number) => {
    if (current >= optimal) return 'text-green-600 bg-green-100';
    if (current >= min) return 'text-yellow-600 bg-yellow-100';
    return 'text-red-600 bg-red-100';
  };

  const getStatusIcon = (current: number, min: number, optimal: number) => {
    if (current >= optimal) return <CheckCircle className="w-4 h-4 text-green-600" />;
    if (current >= min) return <AlertCircle className="w-4 h-4 text-yellow-600" />;
    return <AlertCircle className="w-4 h-4 text-red-600" />;
  };

  return (
    <div className="space-y-6">
      {/* 数据要求说明 */}
      <div className="bg-blue-50 border border-blue-200 rounded-xl p-5">
        <div className="flex items-start gap-3">
          <Info className="w-5 h-5 text-blue-600 mt-0.5 flex-shrink-0" />
          <div>
            <h3 className="font-semibold text-blue-900 mb-2">智能洞察数据要求</h3>
            <p className="text-sm text-blue-800 leading-relaxed">
              智能洞察功能需要一定量的任务数据来生成准确的分析结果。
              数据越多越全面，洞察就越精准。建议您持续使用AIDE管理任务，
              系统会自动学习您的工作模式并提供个性化建议。
            </p>
          </div>
        </div>
      </div>

      {/* 当前数据状态 */}
      {currentDataStatus && (
        <div className="bg-theme-bg rounded-xl border border-theme-border/60 shadow-sm p-5">
          <h3 className="text-sm font-semibold text-theme-text mb-4 flex items-center gap-2">
            <div className="w-1 h-4 bg-purple-500 rounded-full"></div>
            您的数据状态
          </h3>
          
          <div className="grid grid-cols-2 lg:grid-cols-3 gap-4 mb-4">
            <div className="text-center p-3 bg-theme-bg-secondary border border-theme-border rounded-lg">
              <div className="text-lg font-bold text-theme-text">{currentDataStatus.totalTasks}</div>
              <div className="text-xs text-theme-text-secondary">总任务数</div>
            </div>
            <div className="text-center p-3 bg-theme-bg-secondary border border-theme-border rounded-lg">
              <div className="text-lg font-bold text-theme-text">{currentDataStatus.completedTasks}</div>
              <div className="text-xs text-theme-text-secondary">已完成任务</div>
            </div>
            <div className="text-center p-3 bg-theme-bg-secondary border border-theme-border rounded-lg">
              <div className="text-lg font-bold text-theme-text">{currentDataStatus.tasksLast30Days}</div>
              <div className="text-xs text-theme-text-secondary">最近30天</div>
            </div>
          </div>

          {/* 数据充足性评估 */}
          <div className="space-y-2">
            <div className="flex items-center justify-between p-2 bg-theme-bg-secondary rounded-lg">
              <span className="text-sm text-theme-text-secondary">工作模式分析</span>
              <div className="flex items-center gap-2">
                {getStatusIcon(currentDataStatus.tasksLast30Days, 5, 15)}
                <span className={`text-xs px-2 py-1 rounded-full font-medium ${getStatusColor(currentDataStatus.tasksLast30Days, 5, 15)}`}>
                  {currentDataStatus.tasksLast30Days >= 15 ? '数据充足' : 
                   currentDataStatus.tasksLast30Days >= 5 ? '基础可用' : '数据不足'}
                </span>
              </div>
            </div>
            
            <div className="flex items-center justify-between p-2 bg-theme-bg-secondary rounded-lg">
              <span className="text-sm text-theme-text-secondary">生产力建议</span>
              <div className="flex items-center gap-2">
                {getStatusIcon(currentDataStatus.tasksLast30Days, 10, 20)}
                <span className={`text-xs px-2 py-1 rounded-full font-medium ${getStatusColor(currentDataStatus.tasksLast30Days, 10, 20)}`}>
                  {currentDataStatus.tasksLast30Days >= 20 ? '数据充足' : 
                   currentDataStatus.tasksLast30Days >= 10 ? '基础可用' : '数据不足'}
                </span>
              </div>
            </div>
          </div>
        </div>
      )}

      {/* 详细功能要求 */}
      <div className="space-y-4">
        <h3 className="text-sm font-semibold text-theme-text flex items-center gap-2">
          <div className="w-1 h-4 bg-green-500 rounded-full"></div>
          功能数据要求详情
        </h3>
        
        {requirements.map((req, index) => (
          <div key={index} className="bg-theme-bg rounded-xl border border-theme-border/60 shadow-sm p-5">
            <div className="flex items-start gap-3 mb-3">
              <div className="p-2 bg-blue-50 border border-blue-200 rounded-lg">
                {req.icon}
              </div>
              <div className="flex-1">
                <h4 className="font-semibold text-theme-text mb-1">{req.feature}</h4>
                <p className="text-sm text-theme-text-secondary mb-3">{req.description}</p>
                
                <div className="space-y-2">
                  <div className="flex items-start gap-2">
                    <div className="w-2 h-2 bg-yellow-500 rounded-full mt-2 flex-shrink-0"></div>
                    <div>
                      <span className="text-xs font-medium text-theme-text-secondary">最低要求：</span>
                      <span className="text-xs text-theme-text-secondary ml-1">{req.minRequirement}</span>
                    </div>
                  </div>
                  
                  <div className="flex items-start gap-2">
                    <div className="w-2 h-2 bg-green-500 rounded-full mt-2 flex-shrink-0"></div>
                    <div>
                      <span className="text-xs font-medium text-theme-text-secondary">推荐配置：</span>
                      <span className="text-xs text-theme-text-secondary ml-1">{req.optimalRequirement}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <div className="border-t border-theme-border pt-3">
              <h5 className="text-xs font-medium text-theme-text-secondary mb-2">数据要点：</h5>
              <ul className="space-y-1">
                {req.dataPoints.map((point, idx) => (
                  <li key={idx} className="flex items-start gap-2">
                    <div className="w-1 h-1 bg-slate-400 rounded-full mt-2 flex-shrink-0"></div>
                    <span className="text-xs text-theme-text-secondary">{point}</span>
                  </li>
                ))}
              </ul>
            </div>
          </div>
        ))}
      </div>

      {/* 快速提升数据质量的建议 */}
      <div className="bg-green-50 border border-green-200 rounded-xl p-5">
        <h3 className="font-semibold text-green-900 mb-3 flex items-center gap-2">
          <TrendingUp className="w-5 h-5" />
          快速提升数据质量
        </h3>
        <div className="grid grid-cols-1 md:grid-cols-2 gap-3">
          <div className="space-y-2">
            <h4 className="text-sm font-medium text-green-800">立即可做：</h4>
            <ul className="space-y-1 text-sm text-green-700">
              <li>• 为现有任务设置截止日期</li>
              <li>• 使用多样化的任务分类</li>
              <li>• 及时更新任务完成状态</li>
              <li>• 设置合理的优先级</li>
            </ul>
          </div>
          <div className="space-y-2">
            <h4 className="text-sm font-medium text-green-800">持续积累：</h4>
            <ul className="space-y-1 text-sm text-green-700">
              <li>• 每天创建和完成几个任务</li>
              <li>• 保持分类和优先级的一致性</li>
              <li>• 记录任务的实际耗时</li>
              <li>• 定期回顾和调整工作流程</li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
}
